<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>灵魂伴侣契合度测试 - 星格</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6C5CE7', // 主紫色
                        secondary: '#FD79A8', // 辅助粉色
                        accent: '#00B4D8',    // 强调色-青色
                        dark: '#2D3748',      // 深色文本
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .soulmate-bg {
                background-image: radial-gradient(circle, rgba(108, 92, 231, 0.05) 1px, transparent 1px);
                background-size: 20px 20px;
            }
            .float {
                animation: float 6s ease-in-out infinite;
            }
            .pulse {
                animation: pulse 3s ease-in-out infinite;
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in;
            }
            @keyframes float {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-10px); }
            }
            @keyframes pulse {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.7; }
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-dark min-h-screen flex flex-col">

    <!-- 主内容区 -->
    <main class="flex-1 pt-5 pb-24 px-4 relative">
        <!-- 全局背景渐变 -->
        <div class="fixed inset-0 w-full h-full" style="background: linear-gradient(135deg, #FDCFE8 0%, #E4C1F9 50%, #BDE0FE 100%); z-index: -1;"></div>
        
        <div class="container mx-auto max-w-md relative z-10">
            <!-- 测试介绍页 -->
            <div id="test-intro" class="mb-6">
                <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg p-6 mb-6 border border-white/50 relative overflow-hidden">
                    <div class="absolute inset-0 soulmate-bg opacity-30"></div>
                    
                    <div class="relative z-10">
                        <div class="text-center mb-6">
                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-100 to-pink-100 flex items-center justify-center mx-auto mb-4 shadow-md">
                            <i class="fa fa-heart text-purple-500 text-2xl"></i>
                        </div>
                        <h2 class="text-xl font-bold text-gray-800 mb-2">灵魂伴侣契合度测试</h2>
                            <p class="text-sm text-gray-500">15题 · 深度分析你们的精神契合度</p>
                        </div>
                        
                        <div class="space-y-4 mb-6">
                            <div class="flex items-start space-x-3">
                                <div class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                                    <i class="fa fa-check text-purple-500 text-xs"></i>
                                </div>
                                <p class="text-sm text-gray-600">
                                    通过深度分析你们的沟通方式、价值观、情感支持等维度，发现你们之间的灵魂契合度。
                                </p>
                            </div>
                            <div class="flex items-start space-x-3">
                                <div class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                                    <i class="fa fa-heart text-purple-500 text-xs"></i>
                                </div>
                                <p class="text-sm text-gray-600">
                                    请根据你们真实的关系状态选择最符合的选项，诚实回答能获得更准确的结果。
                                </p>
                            </div>
                            <div class="flex items-start space-x-3">
                                <div class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                                    <i class="fa fa-clock-o text-purple-500 text-xs"></i>
                                </div>
                                <p class="text-sm text-gray-600">
                                    预计用时8-12分钟，建议在安静环境中与伴侣一起完成。
                                </p>
                            </div>
                        </div>
                        
                        <button id="start-test" class="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 rounded-xl text-sm font-medium shadow-lg hover:shadow-xl transition-all duration-300">
                            <i class="fa fa-play mr-2"></i>开始测试
                        </button>
                    </div>
                </div>
                
                <!-- 测试特点 -->
                <div class="bg-white rounded-xl shadow-sm p-4">
                    <h3 class="text-sm font-medium mb-3 flex items-center">
                        <i class="fa fa-magic text-purple-500 mr-2"></i>测试特点
                    </h3>
                    <div class="space-y-3">
                        <div class="bg-gradient-to-r from-purple-50 to-purple-100 rounded-lg p-3 border border-purple-200">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-heart text-purple-500 text-sm mr-2"></i>
                                <span class="text-xs font-medium text-gray-700">深度契合分析</span>
                            </div>
                            <p class="text-xs text-gray-600">从多个维度分析你们的精神契合度</p>
                        </div>
                        <div class="bg-gradient-to-r from-pink-50 to-pink-100 rounded-lg p-3 border border-pink-200">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-comments text-pink-500 text-sm mr-2"></i>
                                <span class="text-xs font-medium text-gray-700">沟通模式评估</span>
                            </div>
                            <p class="text-xs text-gray-600">分析你们的沟通方式和情感表达</p>
                        </div>
                        <div class="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-lg p-3 border border-indigo-200">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-star text-indigo-500 text-sm mr-2"></i>
                                <span class="text-xs font-medium text-gray-700">价值观匹配</span>
                            </div>
                            <p class="text-xs text-gray-600">评估你们在价值观和人生目标上的一致性</p>
                        </div>
                        <div class="bg-gradient-to-r from-rose-50 to-rose-100 rounded-lg p-3 border border-rose-200">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-magic text-rose-500 text-sm mr-2"></i>
                                <span class="text-xs font-medium text-gray-700">灵魂连接</span>
                            </div>
                            <p class="text-xs text-gray-600">探索你们之间深层次的精神连接</p>
                        </div>
                    </div>
                </div>
            </div>
        
            <!-- 测试题目区（默认隐藏） -->
            <div id="test-questions" class="hidden">
                <!-- 进度条 -->
                <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
                    <div class="flex justify-between text-sm mb-2">
                        <span>问题 <span id="current-question">1</span>/15</span>
                        <span id="progress-percent">7%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div id="progress-bar" class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 7%"></div>
                    </div>
                </div>
                
                <!-- 题目容器 -->
                <div id="question-container" class="bg-white rounded-xl shadow-sm p-5 mb-6">
                    <h3 id="question-text" class="text-base font-medium mb-4">
                        您如何形容您与伴侣的沟通方式？
                    </h3>
                    
                    <div class="space-y-3">
                        <label class="block">
                            <input type="radio" name="question-1" value="A" class="hidden peer">
                            <div class="p-3 border border-gray-200 rounded-lg peer-checked:border-purple-500 peer-checked:bg-purple-50 hover:bg-gray-50 transition-colors cursor-pointer">
                                <div class="flex items-center">
                                    <div class="w-5 h-5 rounded-full border border-gray-300 flex items-center justify-center mr-3 peer-checked:border-purple-500">
                                        <div class="w-3 h-3 rounded-full bg-purple-500 hidden peer-checked:block"></div>
                                    </div>
                                    <span>A. 公开、诚实，总是能够坦诚交流</span>
                                </div>
                            </div>
                        </label>
                        
                        <label class="block">
                            <input type="radio" name="question-1" value="B" class="hidden peer">
                            <div class="p-3 border border-gray-200 rounded-lg peer-checked:border-purple-500 peer-checked:bg-purple-50 hover:bg-gray-50 transition-colors cursor-pointer">
                                <div class="flex items-center">
                                    <div class="w-5 h-5 rounded-full border border-gray-300 flex items-center justify-center mr-3 peer-checked:border-purple-500">
                                        <div class="w-3 h-3 rounded-full bg-purple-500 hidden peer-checked:block"></div>
                                    </div>
                                    <span>B. 顽皮和戏弄，经常开玩笑和调侃</span>
                                </div>
                            </div>
                        </label>
                        
                        <label class="block">
                            <input type="radio" name="question-1" value="C" class="hidden peer">
                            <div class="p-3 border border-gray-200 rounded-lg peer-checked:border-purple-500 peer-checked:bg-purple-50 hover:bg-gray-50 transition-colors cursor-pointer">
                                <div class="flex items-center">
                                    <div class="w-5 h-5 rounded-full border border-gray-300 flex items-center justify-center mr-3 peer-checked:border-purple-500">
                                        <div class="w-3 h-3 rounded-full bg-purple-500 hidden peer-checked:block"></div>
                                    </div>
                                    <span>C. 舒适的沉默，不需要太多言语就能理解彼此</span>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
                
                <!-- 导航按钮 -->
                <div class="flex justify-between">
                    <button id="prev-question" class="w-20 bg-white border border-gray-300 text-gray-700 py-2.5 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        上一题
                    </button>
                    <button id="next-question" class="w-20 bg-gradient-to-r from-purple-500 to-pink-500 text-white py-2.5 rounded-lg text-sm font-medium hover:shadow-lg transition-all duration-300">
                        下一题
                    </button>
                </div>
            </div>
            
            <!-- 测试结果区（默认隐藏） -->
            <div id="test-result" class="hidden space-y-6">
                <!-- 结果概览 -->
                <div class="bg-white rounded-xl shadow-sm p-5 relative overflow-hidden">
                    <div class="absolute inset-0 soulmate-bg opacity-50"></div>
                    
                    <div class="relative z-10">
                        <div class="text-center mb-6">
                            <div id="soulmate-icon" class="w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center text-white bg-gradient-to-r from-purple-500 to-pink-500 float">
                                <i class="fa fa-heart text-xl"></i>
                            </div>
                            <h2 class="text-xl font-bold text-purple-600 mb-1" id="soulmate-type">完美灵魂伴侣</h2>
                            <p class="text-sm text-gray-500" id="soulmate-tagline">你们拥有极高的精神契合度</p>
                        </div>
                        
                        <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg p-4 mb-4">
                            <h3 class="text-sm font-medium mb-2">契合度分析</h3>
                            <div class="flex flex-wrap gap-2 mb-3">
                                <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs">沟通完美</span>
                                <span class="px-3 py-1 bg-pink-100 text-pink-700 rounded-full text-xs">价值观一致</span>
                                <span class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs">情感支持</span>
                                <span class="px-3 py-1 bg-rose-100 text-rose-700 rounded-full text-xs">未来规划</span>
                                <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs">精神连接</span>
                            </div>
                            <p class="text-sm text-gray-600" id="soulmate-overview">
                                恭喜！你们的灵魂契合度达到了95%，这表明你们之间存在着深层次的精神连接。你们不仅在沟通上非常合拍，在价值观、人生目标等方面也高度一致，是真正的灵魂伴侣。
                            </p>
                        </div>
                        
                        <button id="retake-test" class="w-full bg-purple-100 text-purple-600 py-2.5 rounded-lg text-sm font-medium hover:bg-purple-200 transition-colors">
                            <i class="fa fa-refresh mr-1"></i> 重新测试
                        </button>
                    </div>
                </div>
                
                <!-- 详细解析 -->
                <div class="bg-white rounded-xl shadow-sm p-5">
                    <h3 class="text-base font-semibold mb-4 flex items-center">
                        <i class="fa fa-heart text-purple-500 mr-2"></i>详细契合度分析
                    </h3>
                    
                    <div class="space-y-5 text-sm">
                        <div>
                            <h4 class="font-medium text-purple-600 mb-2">沟通契合度</h4>
                            <p class="text-gray-600" id="communication-analysis">
                                你们在沟通方面表现出色，能够坦诚地表达自己的想法和感受，同时也能很好地理解对方的观点。这种开放和诚实的沟通方式是维持健康关系的重要基础。
                            </p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-purple-600 mb-2">价值观匹配度</h4>
                            <p class="text-gray-600" id="values-analysis">
                                你们在核心价值观上高度一致，这为你们的关系提供了坚实的基础。共同的价值观让你们在面对重要决策时能够保持一致，减少冲突和分歧。
                            </p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-purple-600 mb-2">情感支持度</h4>
                            <p class="text-gray-600" id="support-analysis">
                                你们在情感上相互支持，能够在对方需要时提供安慰和鼓励。这种相互支持的关系让你们能够共同面对生活中的挑战，成为彼此最坚实的后盾。
                            </p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-purple-600 mb-2">未来规划契合度</h4>
                            <p class="text-gray-600" id="future-analysis">
                                你们对未来有着相似的规划和期待，这为你们的关系提供了明确的方向。共同的未来目标让你们能够携手并进，共同创造美好的生活。
                            </p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-purple-600 mb-2">关系建议</h4>
                            <p class="text-gray-600" id="relationship-advice">
                                你们的关系已经非常稳固，建议继续保持现有的沟通方式和相互支持。可以尝试一起制定一些共同的目标和计划，让关系更加深入和有意义。记住，即使是最契合的伴侣也需要不断地投入和努力来维持关系。
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- 分享和保存按钮 -->
                <div class="flex gap-3">
                    <button class="flex-1 bg-gradient-to-r from-purple-500 to-pink-500 text-white py-2.5 rounded-lg text-sm font-medium hover:shadow-lg transition-all duration-300">
                        <i class="fa fa-share-alt mr-1"></i> 分享结果
                    </button>
                    <button class="flex-1 bg-white border border-gray-300 text-gray-700 py-2.5 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
                        <i class="fa fa-bookmark-o mr-1"></i> 保存结果
                    </button>
                </div>
            </div>
        </div>
    </main>

    <!-- 测试结果弹框 -->
    <div id="result-modal" class="fixed inset-0 bg-black/50 z-50 hidden">
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 transform translate-y-full transition-transform duration-300 max-h-[80vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-bold text-gray-800">测试结果</h3>
                <button id="close-result-modal" class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition-colors">
                    <i class="fa fa-times text-gray-600"></i>
                </button>
            </div>
            
            <div id="result-content" class="space-y-6">
                <!-- 结果内容将通过JavaScript动态生成 -->
            </div>
            
            <div class="mt-6 flex space-x-3">
                <button id="retake-test-modal" class="flex-1 py-3 border border-gray-300 rounded-xl text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                    <i class="fa fa-refresh mr-2"></i>重新测试
                </button>
                <button id="back-to-home-modal" class="flex-1 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl text-sm font-medium hover:shadow-lg transition-all duration-300">
                    <i class="fa fa-home mr-2"></i>返回首页
                </button>
            </div>
        </div>
    </div>

    <!-- 装饰元素 -->
    <div class="fixed top-1/3 left-4 w-4 h-4 rounded-full bg-purple-200/30 pulse z-0"></div>
    <div class="fixed bottom-1/4 right-6 w-6 h-6 rounded-full bg-pink-200/30 pulse z-0" style="animation-delay: 1s"></div>

    <!-- 底部导航栏 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.05)] z-30">
        <div class="container mx-auto">
            <div class="flex justify-around">
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="home-tab">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </button>
                <button class="tab-button tab-active flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="test-tab">
                    <i class="fa fa-list-alt text-lg"></i>
                    <span class="text-xs mt-1">测试</span>
                </button>
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="fortune-tab">
                    <i class="fa fa-moon-o text-lg"></i>
                    <span class="text-xs mt-1">运势</span>
                </button>
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="profile-tab">
                    <i class="fa fa-user-o text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </button>
            </div>
        </div>
    </footer>

    <script>
        // 测试题目数据
        const testQuestions = [
            {
                id: 1,
                text: "您如何形容您与伴侣的沟通方式？",
                options: [
                    "A. 公开、诚实，总是能够坦诚交流",
                    "B. 顽皮和戏弄，经常开玩笑和调侃",
                    "C. 舒适的沉默，不需要太多言语就能理解彼此"
                ]
            },
            {
                id: 2,
                text: "伴侣对未来规划有何看法？",
                options: [
                    "A. 喜欢一起制定详细的计划和目标",
                    "B. 喜欢有计划和自发的活动相结合",
                    "C. 喜欢随波逐流，不过分规划未来"
                ]
            },
            {
                id: 3,
                text: "伴侣如何处理关系中的冲突？",
                options: [
                    "A. 公开解决问题并寻求解决方案",
                    "B. 在讨论问题之前需要时间冷静下来",
                    "C. 寻求朋友或家人的建议"
                ]
            },
            {
                id: 4,
                text: "您最喜欢的共享活动是什么？",
                options: [
                    "A. 深度对话和智力交流",
                    "B. 冒险旅行和探索新事物",
                    "C. 在家度过安静的夜晚"
                ]
            },
            {
                id: 5,
                text: "在充满挑战的时期，伴侣如何让您感觉？",
                options: [
                    "A. 支持和理解，给予情感安慰",
                    "B. 有动力共同面对挑战",
                    "C. 因他的存在而感到安慰和安心"
                ]
            },
            {
                id: 6,
                text: "幽默在您们的关系中扮演什么角色？",
                options: [
                    "A. 粘合剂，必不可少",
                    "B. 添加俏皮元素，偶尔使用",
                    "C. 不是首要任务，更注重深度交流"
                ]
            },
            {
                id: 7,
                text: "伴侣如何表达爱意？",
                options: [
                    "A. 贴心的举动和惊喜",
                    "B. 身体接触和拥抱",
                    "C. 用言语表达爱意"
                ]
            },
            {
                id: 8,
                text: "伴侣如何看待您的个人成长和抱负？",
                options: [
                    "A. 鼓励并支持您的目标",
                    "B. 有兴趣但节奏舒适",
                    "C. 对现状的满足"
                ]
            },
            {
                id: 9,
                text: "共同的价值观和信仰对您们来说有多重要？",
                options: [
                    "A. 极其重要，是关系的基础",
                    "B. 中等重要，可以求同存异",
                    "C. 不是一个重要因素"
                ]
            },
            {
                id: 10,
                text: "伴侣对您与朋友和家人的亲密关系持什么态度？",
                options: [
                    "A. 欢迎和支持，积极参与",
                    "B. 平衡，欣赏独立性和联系",
                    "C. 不是首要任务"
                ]
            },
            {
                id: 11,
                text: "伴侣如何处理您的情绪，尤其是在充满挑战的时期？",
                options: [
                    "A. 富有同情心和安慰",
                    "B. 提供解决方案并激励",
                    "C. 给予空间但仍然支持"
                ]
            },
            {
                id: 12,
                text: "伴侣如何看待灵魂伴侣的概念？",
                options: [
                    "A. 相信灵魂伴侣和深厚的联系",
                    "B. 对这个想法持开放态度，但不执着于它",
                    "C. 对这个概念持怀疑态度"
                ]
            },
            {
                id: 13,
                text: "伴侣对恋爱关系中的意外有什么看法？",
                options: [
                    "A. 喜欢给您惊喜",
                    "B. 喜欢偶尔的惊喜",
                    "C. 不喜欢惊喜"
                ]
            },
            {
                id: 14,
                text: "伴侣如何支持您的爱好和兴趣？",
                options: [
                    "A. 积极参与并激发您的热情",
                    "B. 表现出兴趣并可能偶尔加入",
                    "C. 尊重您的兴趣但有不同的爱好"
                ]
            },
            {
                id: 15,
                text: "伴侣如何让您对自己和整个关系有什么感觉？",
                options: [
                    "A. 被爱、有安全感、被珍惜",
                    "B. 兴奋、满足、乐观",
                    "C. 内容、舒适、安心"
                ]
            }
        ];

        // 灵魂伴侣类型数据
        const soulmateTypes = [
            {
                type: "完美灵魂伴侣",
                score: "90-100",
                tagline: "你们是真正的灵魂伴侣，拥有深度的精神连接",
                color: "purple",
                icon: "fa-heart",
                traits: ["深度理解", "完美沟通", "价值观一致", "相互支持", "精神契合"],
                overview: "恭喜！你们是真正的灵魂伴侣。你们之间有着深度的精神连接，能够完美理解彼此，在价值观、人生目标和情感需求上高度一致。你们的关系不仅建立在爱情基础上，更有着深层次的精神契合。",
                strengths: [
                    "你们拥有完美的沟通和理解",
                    "在价值观和人生目标上高度一致",
                    "能够相互支持和鼓励成长",
                    "拥有深度的情感和精神连接",
                    "能够共同面对生活的挑战"
                ],
                advice: "珍惜这份难得的灵魂伴侣关系，继续保持开放和诚实的沟通，一起成长，创造更多美好的回忆。你们的关系是许多人梦寐以求的。"
            },
            {
                type: "高度契合伴侣",
                score: "75-89",
                tagline: "你们有着很好的契合度，是理想的伴侣关系",
                color: "pink",
                icon: "fa-star",
                traits: ["良好沟通", "相互理解", "价值观相近", "情感支持", "共同成长"],
                overview: "你们是一对高度契合的伴侣！虽然可能不是传统意义上的灵魂伴侣，但你们之间有着很好的理解和默契。你们能够很好地沟通，在大部分重要问题上保持一致，是一对理想的伴侣。",
                strengths: [
                    "你们拥有良好的沟通和理解能力",
                    "在大部分价值观上保持一致",
                    "能够相互支持和鼓励",
                    "关系稳定且充满爱意",
                    "能够共同解决问题和面对挑战"
                ],
                advice: "你们的关系已经非常好了！继续保持开放的心态，多沟通交流，一起探索新的共同兴趣，你们的关系会越来越深。"
            },
            {
                type: "成长型伴侣",
                score: "60-74",
                tagline: "你们有很好的基础，但还需要更多努力来加深连接",
                color: "blue",
                icon: "fa-leaf",
                traits: ["基础良好", "需要磨合", "有潜力", "需要沟通", "可以成长"],
                overview: "你们是一对成长型的伴侣。虽然目前可能在某些方面还不够完美契合，但你们有着良好的基础，通过努力和沟通，你们的关系有很大的成长空间。",
                strengths: [
                    "你们有着良好的感情基础",
                    "愿意为关系付出努力",
                    "在某些方面有很好的默契",
                    "关系有成长和发展的潜力",
                    "彼此关心和爱护"
                ],
                advice: "不要灰心！你们的关系有很大的成长空间。多花时间了解彼此，加强沟通，一起参与活动，你们的关系会越来越深。记住，好的关系需要双方的努力。"
            },
            {
                type: "需要磨合的伴侣",
                score: "40-59",
                tagline: "你们需要更多时间来了解彼此，建立更深层的连接",
                color: "orange",
                icon: "fa-cog",
                traits: ["需要时间", "需要沟通", "需要理解", "需要耐心", "需要努力"],
                overview: "你们目前可能还需要更多时间来了解彼此。虽然你们之间有一定的吸引力，但在价值观、沟通方式或生活方式上可能还存在一些差异。这并不意味着你们不适合，只是需要更多的努力和沟通。",
                strengths: [
                    "你们对彼此有基本的吸引力",
                    "愿意尝试了解对方",
                    "关系还有发展的可能性",
                    "彼此都有改善关系的意愿",
                    "关系有成长的空间"
                ],
                advice: "给彼此更多时间，多沟通交流，了解对方的想法和需求。不要急于求成，好的关系需要时间来培养。如果你们都愿意努力，关系是可以改善的。"
            },
            {
                type: "需要重新考虑",
                score: "0-39",
                tagline: "你们之间可能存在较大的差异，需要认真考虑关系的未来",
                color: "red",
                icon: "fa-exclamation-triangle",
                traits: ["差异较大", "需要思考", "需要沟通", "需要决定", "需要选择"],
                overview: "根据测试结果，你们之间可能存在较大的差异。这可能是价值观、生活方式、沟通方式或人生目标上的不同。这并不意味着你们不能在一起，但需要你们认真考虑这些差异是否能够调和。",
                strengths: [
                    "你们可能在某些方面有互补性",
                    "差异可能带来新的视角",
                    "如果愿意努力，关系仍有改善可能",
                    "诚实面对差异是好的开始",
                    "你们都有选择的权利"
                ],
                advice: "建议你们进行深入的沟通，诚实地讨论彼此的需求和期望。如果你们都愿意为关系付出努力，可以尝试改善。但如果差异太大且无法调和，也许需要考虑是否适合继续在一起。"
            }
        ];

        // 存储用户答案
        const userAnswers = {};
        let currentQuestionIndex = 0;

        // DOM元素
        const testIntro = document.getElementById('test-intro');
        const testQuestions = document.getElementById('test-questions');
        const testResult = document.getElementById('test-result');
        const startTestBtn = document.getElementById('start-test');
        const prevQuestionBtn = document.getElementById('prev-question');
        const nextQuestionBtn = document.getElementById('next-question');
        const retakeTestBtn = document.getElementById('retake-test');
        const questionContainer = document.getElementById('question-container');
        const currentQuestionEl = document.getElementById('current-question');
        const progressBarEl = document.getElementById('progress-bar');
        const progressPercentEl = document.getElementById('progress-percent');

        // 开始测试按钮点击事件
        startTestBtn.addEventListener('click', () => {
            testIntro.classList.add('hidden');
            testQuestions.classList.remove('hidden');
            renderQuestion(currentQuestionIndex);
            window.scrollTo(0, 0);
        });

        // 上一题按钮点击事件
        prevQuestionBtn.addEventListener('click', () => {
            if (currentQuestionIndex > 0) {
                currentQuestionIndex--;
                renderQuestion(currentQuestionIndex);
                updateNavigationButtons();
                updateProgress();
                
                // 滚动到题目顶部
                questionContainer.scrollIntoView({ behavior: 'smooth' });
            }
        });

        // 下一题按钮点击事件
        nextQuestionBtn.addEventListener('click', () => {
            // 获取当前问题的答案
            const questionId = testQuestions[currentQuestionIndex].id;
            const selectedOption = document.querySelector(`input[name="question-${questionId}"]:checked`);
            
            if (!selectedOption) {
                alert('请选择一个答案后再继续');
                return;
            }
            
            // 保存答案
            userAnswers[questionId] = selectedOption.value;
            
            if (currentQuestionIndex < testQuestions.length - 1) {
                currentQuestionIndex++;
                renderQuestion(currentQuestionIndex);
                updateNavigationButtons();
                updateProgress();
                
                // 滚动到题目顶部
                questionContainer.scrollIntoView({ behavior: 'smooth' });
            } else {
                // 完成测试，显示结果
                calculateResult();
                showResultModal();
            }
        });

        // 重新测试按钮点击事件
        retakeTestBtn.addEventListener('click', () => {
            // 重置测试状态
            currentQuestionIndex = 0;
            Object.keys(userAnswers).forEach(key => delete userAnswers[key]);
            
            // 切换到题目页面
            testResult.classList.add('hidden');
            testQuestions.classList.remove('hidden');
            renderQuestion(currentQuestionIndex);
            updateNavigationButtons();
            updateProgress();
            window.scrollTo(0, 0);
        });

        // 渲染题目
        function renderQuestion(index) {
            const question = testQuestions[index];
            
            // 清空容器
            questionContainer.innerHTML = '';
            
            // 创建题目文本
            const questionText = document.createElement('h3');
            questionText.id = 'question-text';
            questionText.className = 'text-base font-medium mb-4';
            questionText.textContent = question.text;
            questionContainer.appendChild(questionText);
            
            // 创建选项容器
            const optionsContainer = document.createElement('div');
            optionsContainer.className = 'space-y-3';
            questionContainer.appendChild(optionsContainer);
            
            // 创建选项
            question.options.forEach(option => {
                const label = document.createElement('label');
                label.className = 'block';
                
                const input = document.createElement('input');
                input.type = 'radio';
                input.name = `question-${question.id}`;
                input.value = option.charAt(0);
                input.className = 'hidden peer';
                
                // 如果有保存的答案，设置为选中
                if (userAnswers[question.id] === option.charAt(0)) {
                    input.checked = true;
                }
                
                const optionDiv = document.createElement('div');
                optionDiv.className = 'p-3 border border-gray-200 rounded-lg peer-checked:border-purple-500 peer-checked:bg-purple-50 hover:bg-gray-50 transition-colors cursor-pointer';
                
                const optionContent = document.createElement('div');
                optionContent.className = 'flex items-center';
                
                const radioIndicator = document.createElement('div');
                radioIndicator.className = 'w-5 h-5 rounded-full border border-gray-300 flex items-center justify-center mr-3 peer-checked:border-purple-500';
                
                const radioDot = document.createElement('div');
                radioDot.className = 'w-3 h-3 rounded-full bg-purple-500 hidden peer-checked:block';
                
                const optionText = document.createElement('span');
                optionText.textContent = option;
                
                radioIndicator.appendChild(radioDot);
                optionContent.appendChild(radioIndicator);
                optionContent.appendChild(optionText);
                optionDiv.appendChild(optionContent);
                label.appendChild(input);
                label.appendChild(optionDiv);
                optionsContainer.appendChild(label);
            });
            
            // 添加动画
            questionContainer.classList.add('fade-in');
            setTimeout(() => {
                questionContainer.classList.remove('fade-in');
            }, 500);
        }

        // 更新导航按钮状态
        function updateNavigationButtons() {
            // 更新上一题按钮
            if (currentQuestionIndex === 0) {
                prevQuestionBtn.disabled = true;
            } else {
                prevQuestionBtn.disabled = false;
            }
            
            // 更新下一题按钮文本
            if (currentQuestionIndex === testQuestions.length - 1) {
                nextQuestionBtn.textContent = '查看结果';
            } else {
                nextQuestionBtn.textContent = '下一题';
            }
        }

        // 更新进度条
        function updateProgress() {
            const progress = ((currentQuestionIndex + 1) / testQuestions.length) * 100;
            progressBarEl.style.width = `${progress}%`;
            currentQuestionEl.textContent = currentQuestionIndex + 1;
            progressPercentEl.textContent = `${Math.round(progress)}%`;
        }

        // 计算测试结果
        function calculateResult() {
            let totalScore = 0;
            let maxScore = testQuestions.length * 3; // 每题最高3分
            
            // 计算得分
            testQuestions.forEach(question => {
                const answer = userAnswers[question.id];
                if (answer === 'A') {
                    totalScore += 3; // A选项3分
                } else if (answer === 'B') {
                    totalScore += 2; // B选项2分
                } else if (answer === 'C') {
                    totalScore += 1; // C选项1分
                }
            });
            
            // 计算百分比
            const percentage = Math.round((totalScore / maxScore) * 100);
            
            // 根据得分确定类型
            let resultType;
            if (percentage >= 90) {
                resultType = soulmateTypes[0];
            } else if (percentage >= 75) {
                resultType = soulmateTypes[1];
            } else if (percentage >= 60) {
                resultType = soulmateTypes[2];
            } else if (percentage >= 40) {
                resultType = soulmateTypes[3];
            } else {
                resultType = soulmateTypes[4];
            }
            
            return {
                ...resultType,
                actualScore: percentage,
                totalQuestions: testQuestions.length,
                answeredQuestions: Object.keys(userAnswers).length
            };
        }

        // 显示结果弹框
        function showResultModal() {
            const result = calculateResult();
            const modal = document.getElementById('result-modal');
            const resultContent = document.getElementById('result-content');
            
            // 生成结果内容
            resultContent.innerHTML = generateSoulmateResultContent(result);

            // 写入本地存储供“我的伴侣”展示
            try {
                const scoreNum = typeof result.actualScore === 'number' ? result.actualScore : 0;
                localStorage.setItem('soulmate_result', JSON.stringify({
                    score: scoreNum,
                    actualScore: scoreNum,
                    type: result.type || '',
                    at: Date.now()
                }));

                // 追加到测试历史
                const item = {
                    key: 'soulmate',
                    title: '灵魂伴侣契合度测试',
                    score: scoreNum,
                    brief: result.tagline || '',
                    at: Date.now(),
                    icon: 'fa-heart',
                    colorClass: 'bg-gradient-to-r from-purple-500 to-pink-500'
                };
                const raw = localStorage.getItem('test_history');
                const arr = raw ? JSON.parse(raw) : [];
                arr.push(item);
                localStorage.setItem('test_history', JSON.stringify(arr));
            } catch (e) { /* ignore */ }
            
            // 显示弹框
            modal.classList.remove('hidden');
            
            // 添加动画效果
            setTimeout(() => {
                const modalContent = modal.querySelector('.absolute');
                modalContent.classList.remove('translate-y-full');
            }, 10);
        }

        // 生成灵魂伴侣测试结果内容
        function generateSoulmateResultContent(result) {
            const colorClasses = {
                purple: 'from-purple-500 to-pink-500',
                pink: 'from-pink-500 to-rose-500',
                blue: 'from-blue-500 to-indigo-500',
                orange: 'from-orange-500 to-yellow-500',
                red: 'from-red-500 to-pink-500'
            };
            
            const bgColorClasses = {
                purple: 'from-purple-50 to-pink-50',
                pink: 'from-pink-50 to-rose-50',
                blue: 'from-blue-50 to-indigo-50',
                orange: 'from-orange-50 to-yellow-50',
                red: 'from-red-50 to-pink-50'
            };
            
            return `
                <div class="text-center mb-6">
                    <div class="w-20 h-20 rounded-full bg-gradient-to-br ${bgColorClasses[result.color]} flex items-center justify-center mx-auto mb-4 shadow-lg float">
                        <i class="fa ${result.icon} text-2xl text-${result.color}-500"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800 mb-2">${result.title}</h2>
                    <p class="text-sm text-gray-500">${result.subtitle}</p>
                </div>
                
                <!-- 契合度评分 -->
                <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl p-4 mb-6 border border-purple-200">
                    <h3 class="text-lg font-semibold text-gray-800 mb-3">你们的契合度评分</h3>
                    <div class="flex items-center justify-center mb-4">
                        <div class="text-4xl font-bold text-purple-600">${result.score}%</div>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3 mb-3">
                        <div class="bg-gradient-to-r from-purple-500 to-pink-500 h-3 rounded-full transition-all duration-1000" style="width: ${result.score}%"></div>
                    </div>
                    <p class="text-sm text-gray-600 text-center">${result.scoreDescription}</p>
                </div>
                
                <div class="space-y-4">
                    <div class="bg-white/50 rounded-xl p-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">契合度分析</h3>
                        <p class="text-sm text-gray-600">${result.analysis}</p>
                    </div>
                    
                    <div class="bg-white/50 rounded-xl p-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">优势领域</h3>
                        <div class="flex flex-wrap gap-2">
                            ${result.strengths.map(strength => `
                                <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs">${strength}</span>
                            `).join('')}
                        </div>
                    </div>
                    
                    <div class="bg-white/50 rounded-xl p-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">改进建议</h3>
                        <p class="text-sm text-gray-600">${result.suggestions}</p>
                    </div>
                    
                    <div class="bg-white/50 rounded-xl p-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">深度解析</h3>
                        <p class="text-sm text-gray-600">${result.detailedAnalysis}</p>
                    </div>
                </div>
            `;
        }

        // 初始化结果弹框事件
        function initResultModal() {
            const modal = document.getElementById('result-modal');
            const closeButton = document.getElementById('close-result-modal');
            const retakeButton = document.getElementById('retake-test-modal');
            const backToHomeButton = document.getElementById('back-to-home-modal');
            
            // 关闭弹框
            closeButton.addEventListener('click', closeResultModal);
            
            // 点击背景关闭弹框
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    closeResultModal();
                }
            });
            
            // 重新测试
            retakeButton.addEventListener('click', () => {
                closeResultModal();
                resetSoulmateTest();
            });
            
            // 返回首页
            backToHomeButton.addEventListener('click', () => {
                window.location.href = 'index.html';
            });
        }

        // 关闭结果弹框
        function closeResultModal() {
            const modal = document.getElementById('result-modal');
            const modalContent = modal.querySelector('.absolute');
            
            // 添加关闭动画
            modalContent.classList.add('translate-y-full');
            
            setTimeout(() => {
                modal.classList.add('hidden');
            }, 300);
        }

        // 重置灵魂伴侣测试
        function resetSoulmateTest() {
            // 重置所有状态
            currentQuestionIndex = 0;
            Object.keys(userAnswers).forEach(key => delete userAnswers[key]);
            
            // 隐藏测试相关元素
            testQuestions.classList.add('hidden');
            testResult.classList.add('hidden');
            
            // 显示测试介绍
            testIntro.classList.remove('hidden');
            
            // 滚动到顶部
            window.scrollTo(0, 0);
        }

        // 为返回按钮添加点击事件
        document.getElementById('back-button').addEventListener('click', function() {
            window.location.href = 'index.html';
        });

        // 为Tab按钮添加点击事件
        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有活跃状态
                document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('tab-active'));
                // 添加当前活跃状态
                this.classList.add('tab-active');
                
                // 在实际应用中，这里应该跳转到相应的页面
                const tabId = this.getAttribute('data-tab');
                if (tabId !== 'test-tab') {
                    window.location.href = `index.html#${tabId}`;
                }
            });
        });

        // 初始化弹框事件
        document.addEventListener('DOMContentLoaded', initResultModal);
    </script>
</body>
</html>
           